<%--
  Created by IntelliJ IDEA.
  User: 小信
  Date: 2021/7/2
  Time: 17:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
</head>

<style>
    body{background-image: url("/Eventstar/img/bj1.jpg");no-repeat center center fixed;-webkit-background-size: cover;-o-background-size: cover; background-size: cover;}
    #ksdt1{width: 100%;height: 800px;}
    .ksdt2{width: 60%;height: 80%;background-color: whitesmoke;margin-left: 30%;float: left;margin-top: 5%;}
    .ksdt3{width: 100%; height: 10%;text-align: center;}
    .ksdt4{width: 100%; height: 10%;}
    .ksdt5{width: 90%; height: 50%;border: 1px solid black;margin-left: 5%;}
    .ti1 {width: 100%; height: 20%;background-color:cadetblue;line-height:60px;font-size: 20px;}
    .da1{margin-left: 2%;}
    .da1 div:hover {background-color: lawngreen;}
    .sx1{width:60%;height: 20%; position: absolute;margin-left: 450px;margin-top: 600px;}
    .sx1 div{width: 10%;height: 20%;border-radius: 5px 5px 5px 5px;border: 1px solid black;float: left;text-align: center;}
    .sx2{float: left;margin-left:5%;margin-top: 4%;}
    .sx3{float: left;margin-left:3%;color: white;background-color: black;margin-top: 4%;}
    .sx4{float: left;margin-left:40%;margin-top: 4%;}
    .sx5{float: left;margin-left:2%;color: white;background-color:green;margin-top: 4%;}
    a{text-decoration:none}
    .sx2 a{color: black;}.sx3 a{color: white;}.sx4 a{color: black;}.sx5 a{color: white;}
    #xh1{background-color: black; border: 1px solid black;width: 18%;height: 300px;position: absolute;margin-left: 160px;margin-top: 70px;float: left;overflow: auto;}
    #xh1 div{ border:1px solid white;width: 60px; height: 60px; color: white; padding-left: 10px;line-height: 60px;float: left;text-align: center;margin-left: 10px;margin-top: 5px;background-color: #000000;}
    #xh1 div a{color: white;}
    #ll1{display: none;overflow: auto;width: 85%;height: 700px;float: left;border: 1px solid black; background-color:aliceblue;position: absolute;margin-left: 140px;margin-top: -760px;}
    .ll2{width: 85%;height: 50%;float: left;  background-color: white;margin-left: 10%;}
    .gbll{width: 20%;height: 30px;float: right;border: 1px solid beige; background-color: cornflowerblue;text-align: center;}
    .gbll a{color: black;}
</style>
<script type="text/javascript" src="/Eventstar/js/jquery-1.10.2.js" ></script>
<body>
<div id="ksdt1">
    <div id="xh1">
        <c:forEach var="i"  begin="0" end="${size-1}">
            <div exam_id="${exam.exam_id}"><a href="#" id="ym" >${i+1}</a></div>
        </c:forEach>
    </div>
    <div class="ksdt2">
        <c:forEach items="${tmlist}" var="t">
        <div class="ksdt3"><h1>${exam.exam_name}</h1></div>
        <div class="ksdt4"><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单选题(${t.question_fraction}分)</h2></div>
        <hr />
        <div class="ksdt5">
            <div class="ti1"><span>&nbsp;&nbsp;${t.question_name}</span></div>
            <div class="da1">
                <div><h3><input type="radio"  name="tm" value="A" question_id="${t.question_id}" />A.${t.question_optiona}</h3></div>
                <div><h3><input type="radio"  name="tm" value="B" question_id="${t.question_id}" />B.${t.question_optionb}</h3></div>
                <div><h3><input type="radio"  name="tm" value="C" question_id="${t.question_id}" />C.${t.question_optionc}</h3></div>
                <div><h3><input type="radio"  name="tm" value="D" question_id="${t.question_id}" />D.${t.question_optiond}</h3></div>
            </div>
        </div>
        </c:forEach>
    </div>
    <div class="sx1">
        <div class="sx2" shan="" ><a href="#">上一题</a></div>
        <div class="sx3" shan="" max="${size-1}" ><a href="#">下一题</a></div>
        <div class="sx4"><a href="#">浏览</a></div>
        <div class="sx5"><a href="#">交卷</a></div>
    </div>
</div>
<div id="ll1">
    <div class="gbll"><a href="#">关闭浏览</a></div>
    <c:forEach items="${tmll}" var="l">
    <div class="ll2">
        <div class="ll3"><span><h3>&nbsp;&nbsp;&nbsp;&nbsp;${l.question_name}(${l.question_fraction}分)</h3></span></div>
        <div class="ll4">
            <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A.${l.question_optiona}</h4></div>
            <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B.${l.question_optionb}</h4></div>
            <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C.${l.question_optionc}</h4></div>
            <div><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D.${l.question_optiond}</h4></div>
        </div>
    </div>
    </c:forEach>
</div>
</body>
<script >
    $(function (){
        var  a=null;
        var exam_id=null;
        var exam_name=null;
        $(".sx4").click(function (){
            console.log("111")
            $("#ll1").css("display","block")  ;
        });
        $(".gbll").click(function (){
            $("#ll1").css("display","none");
        });

        $("#xh1 div").click(function (){
            $(".sx2").attr("shan",$(this).text());
            $(".sx3").attr("shan",$(this).text());
            a=$(".sx2").attr("shan");
            exam_id=$(this).attr("exam_id");
            $.ajax({
                type:"post",
                data:{
                    "ym":$(this).text(),
                    "exam_id":$(this).attr("exam_id")
                },
                url:"http://localhost:9090/Eventstar/question/tm",
                "success":function(obj){
                    $(".ksdt2").html("");
                    for(var i=0;i<obj.length;i++)
                    {
                        var p="<div class='ksdt3'><h1>"+exam_name+"</h1></div><div class='ksdt4'><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单选题"+obj[i].question_fraction+"分)</h2></div>"+
                            "<hr />"+
                            "<div class='ksdt5'><div class='ti1'><span>&nbsp;&nbsp;"+obj[i].question_name+"</span></div>"+
                            "<div class='da1'><div><h3><input type='radio' name='tm' value='A' question_id="+obj[i].question_id+" />A."+obj[i].question_optiona+"</h3></div>"+
                            "<div><h3><input type='radio' name='tm' value='B' question_id="+obj[i].question_id+" />B."+obj[i].question_optionb+"</h3></div>"+
                            " <div><h3><input type='radio' name='tm' value='C' question_id="+obj[i].question_id+" />C."+obj[i].question_optionb+"</h3></div>"+
                            "<div><h3><input type='radio' name='tm' value='D' question_id="+obj[i].question_id+"  />D."+obj[i].question_optiond+"</h3></div></div></div>";
                        $(".ksdt2").append(p);
                    }
                }
            })
            $.ajax({
                type:"post",
                data:{
                    "exam_id":$(this).attr("exam_id")
                },
                url:"http://localhost:9090/Eventstar/question/ajax2",
                "success":function(exam){
                    exam_name=exam.exam_name;
                    console.log(exam_name);
                }
            })
        });


        $(".sx2").click(function (){
            a=parseInt(a);
            a--;
            console.log(a);
            if(a>=0)
            {
                console.log("开始上一题");
                $.ajax({
                    type:"post",
                    data:{
                        "ym":a,
                        "exam_id":exam_id
                    },
                    url:"http://localhost:9090/Eventstar/question/shan",
                    "success":function(obj){
                        console.log(obj);
                        $(".ksdt2").html("");
                        for(var i=0;i<obj.length;i++)
                        {
                            var p="<div class='ksdt3'><h1>"+exam_name+"</h1></div><div class='ksdt4'><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单选题"+obj[i].question_fraction+"分)</h2></div>"+
                                "<hr />"+
                                "<div class='ksdt5'><div class='ti1'><span>&nbsp;&nbsp;"+obj[i].question_name+"</span></div>"+
                                "<div class='da1'><div><h3><input type='radio' name='tm' value='A' question_id="+obj[i].question_id+" >A."+obj[i].question_optiona+"</h3></div>"+
                                "<div><h3><input type='radio' name='tm' value='B' question_id="+obj[i].question_id+" >B."+obj[i].question_optionb+"</h3></div>"+
                                " <div><h3><input type='radio' name='tm' value='C' question_id="+obj[i].question_id+" >C."+obj[i].question_optionb+"</h3></div>"+
                                "<div><h3><input type='radio' name='tm'value='D' question_id="+obj[i].question_id+" >D."+obj[i].question_optiond+"</h3></div></div></div>";
                            $(".ksdt2").append(p);
                        }
                    }
                })
            }else
            {
                a=0;
                alert("已经是第一题了");
            }
        });
        $(".sx3").click(function (){
            var max=parseInt($(".sx3").attr("max"));
            a=parseInt(a);
            console.log(a);
            a++;
            if(a<=max)
            {
                console.log(exam_name);
                console.log("开始下一题");
                $.ajax({
                    type:"post",
                    data:{
                        "ym":a,
                        "exam_id":exam_id
                    },
                    url:"http://localhost:9090/Eventstar/question/shan",
                    "success":function(obj){
                        console.log(obj);
                        $(".ksdt2").html("");
                        for(var i=0;i<obj.length;i++)
                        {
                            var p=
                                "<div class='ksdt3'><h1>"+exam_name+"</h1></div><div class='ksdt4'><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单选题"+obj[i].question_fraction+"分)</h2></div>"+
                                "<hr />"+
                                "<div class='ksdt5'><div class='ti1'><span>&nbsp;&nbsp;"+obj[i].question_name+"</span></div>"+
                                "<div class='da1'><div><h3><input type='radio' name='tm' value='A' question_id="+obj[i].question_id+">A."+obj[i].question_optiona+"</h3></div>"+
                                "<div><h3><input type='radio' name='tm' value='B' question_id="+obj[i].question_id+" >B."+obj[i].question_optionb+"</h3></div>"+
                                " <div><h3><input type='radio' name='tm' value='C' question_id="+obj[i].question_id+" >C."+obj[i].question_optionb+"</h3></div>"+
                                "<div><h3><input type='radio' name='tm'value='D' question_id="+obj[i].question_id+" >D."+obj[i].question_optiond+"</h3></div></div></div>";
                            $(".ksdt2").append(p);

                        }
                    }
                })

            }else
            {
                a=max;
                alert("已经是最后一题了题了");
            }
        });
        var da=[];
        var newArr= [];//不重复的数组对象

        $('body').delegate('input:radio[name="tm"]','change',function(){
            if ($(this).is(":checked")) {
                console.log($(this).val());
                console.log($(this).attr("question_id"));
                console.log(exam_name);
                da.push({"daan":$(this).val(),"question_id":$(this).attr("question_id"),"exam_name":exam_name});

                var s=JSON.stringify(da);
                localStorage.setItem("da",s);
                console.log("已存储到本地");
            }
        });

        $(".sx5").click(function (){
            var max=parseInt($(".sx3").attr("max"))+1;
            var ok=localStorage.getItem("da");
            console.log(ok);
            var sz=JSON.parse(ok);
            console.log(sz);
            var arrId = [];//放对象id
            for(var item of sz){
                if(arrId.indexOf(item['question_id']) == -1){
                    arrId.push(item['question_id']);
                    newArr.push(item);
                }
            }
            console.log(newArr);
            console.log("已答长度:"+newArr.length);
            console.log("总题目长度:"+max);
            if(newArr.length<max)
            {
                var bolle=confirm("你还有题目未答确定交卷嘛?");
                if(bolle==true)
                {
                    console.log("已交卷");
                    $.ajax({
                        type:"post",
                        data:{
                            "sz":JSON.stringify(newArr)
                        },
                        url:"http://localhost:9090/Eventstar/question/tijiao",
                        "success":function(obj){
                            // console.log(obj.fen);
                            // console.log(obj.num);
                            // console.log(obj.dui);
                            // console.log(obj.cuo);
                            // console.log(obj.exam_name);
                            window.location.href="http://localhost:9090/Eventstar/question/grade?fen="+obj.fen+"&num="+obj.num+"&dui="+obj.dui+"&cuo="+obj.cuo+"&exam_name="+obj.exam_name1+"";
                        }
                    })
                }else
                {
                    console.log("已取消");
                }
            }else if (newArr.length==max){
                $.ajax({
                    type:"post",
                    data:{
                        "sz":ok
                    },
                    url:"http://localhost:9090/Eventstar/question/tijiao",
                    "success":function(obj){
                        // console.log(obj.fen);
                        // console.log(obj.num);
                        // console.log(obj.dui);
                        // console.log(obj.cuo);
                        // console.log(obj.exam_name1);
                        window.location.href="http://localhost:9090/Eventstar/question/grade?fen="+obj.fen+"&num="+obj.num+"&dui="+obj.dui+"&cuo="+obj.cuo+"&exam_name="+obj.exam_name1+"";
                    }
                })
            }
        });


    })
</script>
</html>




